<template>
  <view class="box">
    <view class="msg">
      <view class="hyd" style="color: #ff4920;">告警标题：{{ item.title }}</view>
      <view class="bh">牲畜id：{{ item.number }}</view>
      <view style="color: #9d9d9d;">告警设备id：{{ item.imei }}</view>
      <view style="color: #9d9d9d; font-size: 12px; margin-top: 10rpx;">告警设备类型：{{ item.alarmtype }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">告警原因：{{ item.alarmreson }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">告警时间：{{ item.alarmtime }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">设备类型：{{ item.sbtype }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">设备数据：{{ item.sbdata }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">牧场id：{{ item.orgid }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">告警状态：{{ item.alarmzt }}</view>
      <view style="color: #9d9d9d; font-size: 12px;">备注：{{ item.remark }}</view>
    </view>
    <view class="arrow-right">
      <uv-icon name="arrow-right" size="30" color="#9e9e9e"></uv-icon>
    </view>
  </view>
</template>

<script setup>
  defineProps({
    item: {
      type: Object,
      required: true
    }
  })
</script>

<style scoped>
	.box {
	  width: 650rpx;
	  height: auto; /* 高度自适应 */
	  margin-left: 28rpx;
	  margin-bottom: 28rpx;
	  background-color: #ffffff;
	  display: flex;
	  border-radius: 20rpx;
	  padding: 20rpx; /* 添加内边距 */
	}
	
	.msg{
		margin-left: 43rpx;
		flex: 1;
		overflow: hidden; /* 防止内容溢出 */
	}
	
	.arrow-right{
		width: 60rpx;
		display: flex;
		align-items: center;
	}
	
	.hyd{
		margin-top: 26rpx;
	}
	
	.bh{
		margin: 8rpx 0;
	}
	
	/* 添加滚动条样式 */
	.msg::-webkit-scrollbar {
	  width: 4px;
	  height: 4px;
	}
	
	.msg::-webkit-scrollbar-thumb {
	  border-radius: 2px;
	  background-color: #ccc;
	}
</style>